<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-13 11:08:06
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-27 10:56:03
 * @FilePath: \vue-admin-template\src\views\manage\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
    <div style="margin-right: 20px;">
      <img
        src="../../images/4647.jpg_wh860.jpg"
        alt=""
        style="width: 300px; height: 265px; display: block; margin: 0 auto;"
      >
    </div>
    <div style="width: 600px;">
      <el-container direction="vertical">
        <el-header>
          <span class="ge">个人信息</span>
        </el-header>
        <el-main>
          <el-dialog
            title="确认信息"
            :visible.sync="dialogVisible"
            width="30%"
            @close="dialogVisible = false"
          >
            <el-form ref="dialogUserInfoForm" :model="userInfo" label-width="80px">
              <el-form-item label="学号">
                <el-input v-model="userInfo.account" disabled />
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="userInfo.name" disabled />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="userInfo.phone" />
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="userInfo.password" type="password" />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <!-- 注意：这里只是一个示例，实际应根据业务逻辑处理提交 -->
              <el-button type="primary" @click="handleConfirm">确认提交</el-button>
            </span>
          </el-dialog>
          <el-form ref="userInfoForm" :model="userInfo" :rules="rules" label-width="100px" class="custom-label">
            <el-form-item label="学号">
              <el-input v-model="userInfo.account" placeholder="学号" readonly />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="userInfo.password" type="password" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">更新信息</el-button>

            </el-form-item>

          </el-form>

        </el-main>

      </el-container>
    </div>
  </div>
</template>

<script>
import { getData } from '@/api/user'
import { updateData } from '@/api/user'
export default {
  data() {
    var validatePass = (value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      userInfo: {
        account: '',
        name: '',
        phone: '',
        password: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      dialogVisible: false
    }
  },

  created() {
    this.getData()
    this.updateData()
  },
  methods: {
    async getData() {
      const data = {
        account: '1'
      }
      const res = await getData(data)
      console.log(res)
      console.log('--------------------------')
      this.userInfo = res.data.data
    },
    async onSubmit() {
      try {
        console.log('submitting userInfo:', this.userInfo)
        const res = await updateData(this.userInfo)
        console.log(res)
        this.dialogVisible = true
      } catch (error) {
        console.error('Error updating user info:', error)
      }
    },
    handleConfirm() {
      this.dialogVisible = false // 关闭对话框
      // 这里可以添加提交表单的逻辑，如果是模拟操作，可以打印表单数据或者执行其他业务逻辑
      console.log('确认提交的信息:', this.userInfo)
    }
  }
}
</script>

<style>
.ge{
font-size: 22px;
    color: #1e1e1e;
    line-height: 26px;
    font-weight: bold;
    margin: 28px 0 0 30px;
    display: inline-block;
    font-style: normal;
   font-family: STFangsong;
   letter-spacing: 0.5em;
}

.custom-label .el-form-item__label {
  font-size: 14px;
  color: #696969;
  text-align: right;
  font-weight: 100;
  letter-spacing: 0.5em;
  font-family: Microsoft YaHei ;
  /* font-weight: bold; */
}
</style>
